<template>
  <view class="personal" style="height: 100%;
	display: flex;
	flex-direction: column;
	background-color: #009EF0;
	background: url('../../static/image/background1.png') no-repeat center;
	background-size: cover;">
    <view class="title">
      <text class="titletext">个人中心</text>
      <view @click="tomessagelist" style="position:relative">
        <image class="personalmessage" :src="message" />
        <uni-badge v-if="newsNum&&newsNum!='0'" :text="newsNum" type="error" />
      </view>
    </view>
    <view class="user">
      <view
        class="userimg"
        style="background: url('../../static/image/personal_bg.png') no-repeat center;
				  height: 190px;
				  margin: 0 17px 22px;
				  border-radius: 20px;
				  box-shadow: -5px 10px 12px #e1e1e1;
				  background-color: #fff;

				  display: flex;
				  flex-direction: column;
				  justify-content: center;
				  align-items: center;"
      >
        <image style="width:77px;height:77px;margin-bottom:10px;" :src="userimg" />
        <text style="color:#fff;font-size:18px;">{{ username }}</text>
      </view>
    </view>
    <view class="userinfo">
      <view class="message" @click="personalinfo">
        <image class="icon" :src="icon1" />
        <view class="text">
          <text>个人信息</text>
          <text>></text>
        </view>
      </view>
      <view class="help" @click="tohelp">
        <image class="icon" :src="icon2" />
        <view class="text">
          <text>帮助</text>
          <text>></text>
        </view>
      </view>
      <view class="aboat" @click="toaboat">
        <image class="icon" :src="icon3" />
        <view class="text">
          <text>关于</text>
          <text>></text>
        </view>
      </view>
      <view class="update">
        <image class="icon" :src="icon4" />
        <view class="text">
          <text>检查更新</text>
          <text>></text>
        </view>
      </view>
      <button class="btn" type="primary" @click="outlogin">退出登录</button>
    </view>
  </view>
</template>

<script>
import uniBadge from "@/components/uni-badge/uni-badge.vue";
import { ajax } from "../../api/apis";
export default {
  components: { uniBadge },
  data() {
    return {
      username: "",
      userimg: require("../../static/image/personal_img.png"),
      message: require("../../static/image/message.png"),
      icon1: require("../../static/image/icon_info.png"),
      icon2: require("../../static/image/icon_help.png"),
      icon3: require("../../static/image/icon_aboat.png"),
      icon4: require("../../static/image/update_icon.png"),
      newsNum: "0"
    };
  },
  methods: {
    onShow() {
		let _this = this;
		uni.getStorage({
		  key: "userid",
		  success(res) {
		    let id = res.data;
		    ajax({
		      url: "/user/getUserAllInfoByID?userID=" + id,
		      method: "POST",
		      success: res => {
		        _this.username = res.data.data.account;
		      }
		    });
		  }
		});
      const userId = uni.getStorageSync("userid");
      ajax({
        url: "/push/newMassage?userId=" + userId,
        method: "GET",
        success: res => {
			console.log(res)
          this.newsNum = res.data.data || "0";
        }
      });
    },
    outlogin() {
      uni.navigateTo({
        url: "../login/login"
	  });
	  uni.removeStorageSync("userid");
	  uni.removeStorageSync("user");
    },
    personalinfo() {
      uni.navigateTo({
        url: "./personalinfo/personalinfo"
      });
    },
    tomessagelist() {
      uni.navigateTo({
        url: "./messagelist/messagelist"
      });
    },
	tohelp(){
		uni.navigateTo({
			url:"./help/help"
		})
	},
	toaboat(){
		uni.navigateTo({
			url:"./aboat/aboat"
		})
	}
  },
  mounted() {

  }
};
</script>

<style scoped>
uni-page-body {
  height: 100%;
}

.personal {
  height: 100%;
}

.title {
  padding: 15px;
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  box-sizing: border-box;
  color: #fff;
}
.titletext{
	width: 90%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.personalmessage {
  width: 21px;
  height: 21px;
}

.user {
  height: 220px;
  /* background: #fff; */
}

.userimg {
}

.icon {
  width: 14px;
  height: 14px;
  color: #fff;
}

.userinfo {
  margin-top: 10px;
  /* background-color: #fff; */
  padding: 0 15px 15px;
}

.message,
.help,
.update,
.aboat {
  display: flex;
  margin: 0 10px;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.text {
  margin: 0 10px;
  font-size: 12px;
  border-bottom: 1px solid #e1e1e1;
  width:90%;
  display: flex;
  justify-content: space-between;
  padding: 15px 0;
}

.btn {
  margin: 50px auto;
}
</style>
